{include file="admin@public/header"/}

<link rel="stylesheet" href="/public/static/admin/css/report.css" />
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<!-- <link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css"> -->
<style>
	.ui-icon-ellipsis {
		right: 5px;
	}

	#filter-menu .con {
		width: 355px;
	}

	#filter-menu label.tit {
		width: 80px;
	}

	/*.ui-jqgrid tr.jqgrow td {
	white-space: normal !important;
	}
	*/
	.no-query {
		background: url("/public/static/admin/css/img/no_query.png") no-repeat scroll 100px 60px #fff;
		background-position: center;
		border: 1px solid #ddd;
		border-top: none;
		height: 402px;
		margin-right: 0;
	}

	.box-flex {
		overflow: hidden;
		zoom: 1;
	}

	.box-flex .flex {
		float: left;
		width: 33.3%;
	}

	.grid-title {
		font-size: 24px;
		text-align: center;
		clear: none;
	}

	.ui-print .grid-wrap {
		padding: 10px 0 0 30px;
	}

	#conditions-trigger {
		background: url(/public/static/admin/css/img/bg.png) no-repeat;
		border: 0px;
		width: 74px;
		box-shadow: 0px 0px;
	}

	#filter-menu .conditions-trigger>b {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -8px;
		width: 16px;
		height: 16px;
		background: url(/public/static/admin/css/img/down.png) 2px 5px no-repeat;
	}

	#filter-menu .conditions-trigger>b.act {
		background: url(/public/static/admin/css/img/up.png) 2px 5px no-repeat;
	}

	#filter-menu .btns {
		position: absolute;
		top: 7px;
		right: 0px;
	}

	.layui-form-checkbox[lay-skin=primary] i {
		padding: 0;
	}

	.layui-form-checked[lay-skin=primary] i {
		border-color: #5dc5e7;
		background-color: #5dc5e7;
		color: #fff;
		padding: 0;
	}

	.layui-form-checkbox[lay-skin=primary]:hover i {
		border-color: #5dc5e7;
	}

	.layui-form-checkbox span {
		font-size: 12px;
	}

	.layui-form-checkbox[lay-skin=primary] {
		padding-left: 22px;
	}
</style>

<div class="wrapper">
	<!-- header -->
	<div class="mod-search cf">
		<form class="layui-form">
			<div class="l " id="filter-menu">
				<ul class="ul-inline fix" id="filterItems" style="height: 44px;font-size: 12px;">
					<li id="date" style="display: list-item;"><label>单据日期:</label>
						<input type="date" id="startdate" class="ui-input "
							value="{$month.month_start|date='Y-m-d',###}" style="width: 125px;">
						<span class="todate"> 至 </span>
						<input type="date" id="enddate" class="ui-input " value="{$month.month_end|date='Y-m-d',###}"
							style="width: 125px;">
					</li>
					<li id="sale-rank-filter"><span id="sale-rank-catorage"></span></li>
					<!-- 选择客户 -->
					{include file="admin@select/customer"/}

					<!-- 选择商品 -->
					{include file="admin@select/goods"/}

					<!-- 选择职员 -->
					{include file="admin@select/staff"/}
					<!-- <li id="supplier" style="display: list-item;">
						<label>客户:</label>
						<span class="mod-choose-input" id="customer">
							<input type="text" class="ui-input" id="supplierAuto" autocomplete="off"><span
								class="ui-icon-ellipsis" onclick="chooseSupplier()"></span>
						</span>
					</li>
					<li id="goods" style="display: list-item;">
						<label>商品:</label>
						<span class="mod-choose-input" id="filter-goods">
							<input type="text" class="ui-input" id="goodsAuto" autocomplete="off">
							<span class="ui-icon-ellipsis" onclick="pre_choose_goods()"></span>
						</span>
					</li>
					<li id="sales" style="display: list-item;">
						<label>销售人员:</label>
						<span class="mod-choose-input" id="filter-saler">
							<input type="text" class="ui-input ui-combo-active" id="salerAuto" autocomplete="off">
							<span class="ui-icon-ellipsis"></span>
						</span>
					</li> -->
					<li id="billNum" style="display: list-item;">
						<label>订单号</label>
						<input type="text" value="" style="width:115px;font-size: 12px;" class="ui-input ui-input-ph"
							name="sn" id="sn" placeholder="请输入单号查询">
					</li>

					<!-- 选择客户类别 -->
					{include file="admin@select/customer_category"/}

					<li id="deliveryDate" style="display: list-item;">
						<label>预计交货日:</label>
						<input type="date" id="jh_time_start" class="ui-input " value="" style="width: 125px;">
						<span class="todate"> 至 </span>
						<input type="date" id="jh_time_end" class="ui-input " value="" style="width: 125px;">
					</li>
					<li id="status-wrap" style="display: list-item;padding-top: 11px;">
						<label>状态:</label>
						<input type="checkbox" name="status" id="" lay-skin="primary" title="未出库" value="1" checked="">
						<input type="checkbox" name="status" id="" lay-skin="primary" title="部分入库" value="2" checked="">
						<input type="checkbox" name="status" id="" lay-skin="primary" title="已出库" value="3" checked="">
					</li>
					<li id="status-order-wrap"
						style="display: list-item;padding-top: 14px;height: 44px;box-sizing: border-box;">
						<input type="checkbox" name="status" id="" lay-skin="primary" title="已关闭" value="4">
					</li>
					<li class="chk-list" id="chk-wrap"
						style="display: list-item;padding-top: 14px;height: 44px;box-sizing: border-box;">
						<input type="checkbox" name="status" id="chk-wrap-good" lay-skin="primary" title="按商品排列"
							value="5" checked="" lay-filter="chk-wrap-filter">
						<input type="checkbox" name="status" id="chk-wrap-date" lay-skin="primary" title="按单据排列"
							value="6" lay-filter="chk-wrap-filter">
					</li>
					<li id="showSubtotal"
						style="display: list-item;padding-top: 14px;height: 44px;box-sizing: border-box;">
						<input type="checkbox" name="status" id="showSubtotalStatus" lay-skin="primary" title="显示小计"
							value="7" checked="">
					</li>
					<li id="includeStatus"
						style="display: list-item;padding-top: 14px;height: 44px;box-sizing: border-box;">
						<input type="checkbox" name="status" id="" lay-skin="primary" title="包含未审核订单" value="8"
							checked="">
					</li>


					<div class="btns" style="top:0;"><a class="ui-btn mrb ui-btn-search" id="filter-submit">查询</a></div>
					<!-- <span class="url-box" id="openUrl"><a href="https://club.kingdee.com/club/newclub/school/course?product_id=7&amp;cid=1548#pid=5713" target="_blank" class="video-icon" style="margin-right: 5px;"></a>功能简介</span> -->
				</ul>
				<a href="#" id="conditions-trigger" class="ui-btn conditions-trigger"
					tabindex="-1">&nbsp;更多条件<b></b></a>
			</div>
		</form>
	</div>


	<!-- 选择客户类别下拉 -->
	{include file="admin@popup/customer_category"/}

	<!-- no data -->
	<div class="no-query"></div>
	<!-- grid begin -->
	<div class="ui-print" id="ui-print" style="visibility: hidden;">
		<!-- 列配置 -->
		<div class="cf box-flex">
			<div class="flex">
				<span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
			</div>

			<div class="grid-title flex">销售订单跟踪表</div>
			<div class="fr">
				<a href="#" class="ui-btn ui-btn-export btn-sm mrb fl" id="btn-export">导出</a>
				<a href="javascript:void(0)" class="ui-btn ui-btn-print btn-sm fl" id="btn-print"
					onclick="preview(1)">打印</a>
			</div>
		</div>

		<div class="grid-wrap" id="grid-wrap" style="padding-bottom: 30px;padding-right: 30px;">
			<!--startprint-->
			<!-- <div class="grid-title">采购订单跟踪表</div> -->
			<div class="grid-subtitle"></div>
			<table id="grid"></table>
			<!--endprint-->
			<div id="page"></div>
		</div>
	</div>
	<!-- grid end -->

	<!--  以隐藏的方式获取商品的样式 ，作用是赋值 -->
	<div style="display:none;">
		<input type="text" id="supplierid" value="" autocomplete="off" readonly="">

		<input type="text" id="goodsid" value="" autocomplete="off" readonly="">
		<input type="text" id="goodsname" value="" autocomplete="off" readonly="">
		<input type="text" id="goodstype" value="" autocomplete="off" readonly="">
		<input type="text" id="goodsmark" value="" autocomplete="off" readonly="">
		<input type="text" id="goodsdw" value="" autocomplete="off" readonly="">
	</div>
</div>

<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
	function preview(oper) {
		if (oper < 10) {
			$("#grid-wrap").jqprint();
		} else {
			window.print();
		}
	}

	function chooseSupplier() {
		layer.open({
			type: 2,
			title: "选择供应商",
			shadeClose: true,
			shade: 0.3,
			maxmin: false, //开启最大化最小化按钮
			area: ['775px', '510px'],
			fixed: false, //不固定
			btn: ['确定', '取消'],
			content: "/admin/basic/choose_customer.html",
			btn1: function (index, layero) {
				var body = layer.getChildFrame('body', index);
				var supplierid = body.find('input[name="goodid"]:checked').val();

				if (supplierid == '' || supplierid == null) {
					layer.msg("请选择供应商");
					return false;
				} else {
					//获取商品信息
					$.get("/admin/basic/one_customer.html", { id: supplierid }, function (data, state) {
						if (data.status == 1) {
							$("#customer input").val(data.info.sn + " " + data.info.name);
							$('#supplierid').val(data.info.id);
							layer.close(index);
						} else {
							layer.msg("获取商品信息失败");
						}
					})
				}
				layer.close(index);
				return false;
			},
			btn4: function (index, layero) {
				layer.close(index);
				return false;
			}
		})
	}
	function pre_choose_goods() {
		layer.open({
			type: 2,
			title: "选择商品",
			shadeClose: true,
			shade: 0.3,
			maxmin: false, //开启最大化最小化按钮
			area: ['775px', '510px'],
			fixed: false, //不固定
			btn: ['确定', '取消'],
			content: "/admin/basic/choose_goods.html",
			btn1: function (index, layero) {
				var body = layer.getChildFrame('body', index);
				var goods_id = body.find('input[name="goodid"]:checked').val();

				if (goods_id == '' || goods_id == null) {
					layer.msg("请选择商品");
					return false;
				} else {
					//获取商品信息
					$.get("/admin/basic/one_goods.html", { id: goods_id }, function (data, state) {
						if (data.status == 1) {
							$("#goods input").val(data.info.sn + " " + data.info.name);
							$('#goodsid').val(data.info.id);
							layer.close(index);
						} else {
							layer.msg("获取商品信息失败");
						}
					})
				}
				layer.close(index);
				return false;
			},
			btn4: function (index, layero) {
				layer.close(index);
				return false;
			}
		})
	}
</script>


<script type="text/javascript">

	$(document).ready(function () {

		layui.use('form', function () {
			var form = layui.form;
			//判断按商品排列、按单据排列（单选）
			form.on('checkbox(chk-wrap-filter)', function (data) {
				var v = data.elem.value;
				// console.log(v);
				if (v == 5) {
					if ($("#chk-wrap-date").get(0).checked) {
						$("#chk-wrap-date").prop("checked", false);
						form.render('checkbox');
					} else {

					}
				} else if (v == 6) {
					if ($("#chk-wrap-good").get(0).checked) {
						$("#chk-wrap-good").prop("checked", false);
						form.render('checkbox');
					} else {

					}
				}
			});
		});

		// 点击查询按钮
		$("#filter-submit").click(function () {
			$("#ui-print").css({ "visibility": "visible" });  //显示表格数据
			$(".no-query").hide();  //隐藏提示

			// 设置表格高度
			$("#grid").setGridHeight($(window).height() - 230 - $("#filter-menu").height() + "px");

			// 判断是否勾选“小计”
			var groupings = true;
			if ($("#showSubtotalStatus").get(0).checked) {
				groupings = true;
			} else {
				groupings = false;
			}

			var startdate = $('#startdate').val();
			var enddate = $('#enddate').val();
			var supplierid = $('#supplierid').val();
			var goodsid = $('#goodsid').val();

			// 高级搜索
			var staff_id = $('#staff_id').val();
			var sn = $('#sn').val();
			var customer_category_id = $('#customer_category_id').val();
			var jh_time_start = $('#jh_time_start').val();
			var jh_time_end = $('#jh_time_end').val();

			let arr = new Array();
			$('input[name="status"]:checked').each(function () {
				arr.push($(this).val());
			});
			let status = arr.join(',');

			$("div.grid-subtitle").text("日期: " + startdate + " 至 " + enddate);

			//此处可以添加对查询数据的合法验证 
			$("#grid").jqGrid('setGridParam', {
				datatype: 'json',
				grouping: groupings,  //是否显示小计
				postData: {
					'ajax': '100',
					'startdate': startdate,
					'enddate': enddate,
					'supplierid': supplierid,
					'goodsid': goodsid,
					staff_id: staff_id,
					sn: sn,
					customer_category_id: customer_category_id,
					jh_time_start: jh_time_start,
					jh_time_end: jh_time_end,
					status: status
				}, //发送数据 
				page: 1
			}).trigger("reloadGrid"); //重新载入 
		});

		//alert("1111");
		$("#grid").jqGrid({
			url: '/sales/salesordertracking/index.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '90%',//高度，表格高度。可为数值、百分比或'auto'
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ["商品编号", "商品名称", "规格型号", "单位", "订单日期", "销售订单编号", "销售人员", "客户", "仓库", "状态", "数量", "基本数量", "单价", "销售额", "未出库基本数量", "未出库金额", "预计交货日期", "最后出库日期", "备注", '商品ID'],
			colModel: [
				{ name: 'goods_sn', index: 'id', width: 80, label: "商品编号" },
				{ name: 'goods_name', index: 'name asc', width: 200, label: "商品名称" },
				{ name: 'goods_model', index: 'name asc', width: 60, label: "规格型号" },
				{ name: 'unit_name', index: 'name asc', width: 50, label: "单位" },
				{ name: 'addtime', index: 'name asc', width: 80, label: "订单日期" },
				{ name: 'sn', index: 'name asc', width: 120, label: "销售订单编号" },
				{ name: 'saler_name', index: 'name asc', width: 80, label: "销售人员" },
				{ name: 'user_name', index: 'name asc', width: 150, label: "客户" },
				{ name: 'store_name', index: 'name asc', width: 120, label: "仓库" },
				{ name: 'status', index: 'name asc', width: 60, label: "状态", summaryType: 'sum', summaryTpl: '<b> 小计 </b>', formatter: 'count' },
				{ name: 'num', index: 'name asc', width: 50, label: "数量", summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'base_shuliang', index: 'name asc', width: 50, label: "基本数量", summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'hs_price', index: 'name asc', width: 100, label: "单价" },
				{ name: 'total_price', index: 'name asc', width: 100, label: "销售额", summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'rukuNum', index: 'name asc', width: 100, label: "未出库基本数量", summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'rukuMoney', index: 'name asc', width: 80, label: "未出库金额", summaryType: 'sum', summaryTpl: '<b> {0}</b>', formatter: 'number' },
				{ name: 'jh_time', index: 'name asc', width: 80, label: "预计交货日期" },
				{ name: 'shenhe_time', index: 'name asc', width: 80, label: "最后出库日期" },
				{ name: 'mark', index: 'name asc', width: 180, label: "备注" },
				{ name: 'good_id', hidden: true },
			],
			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'goods_id',
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			pagination: true,
			altRows: false,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			// 合计
			footerrow: true,
			gridComplete: function () {
				var nums = $("#grid").getCol('num', false, 'sum');
				var base_shuliangs = $("#grid").getCol('base_shuliang', false, 'sum');
				var total_prices = $("#grid").getCol('total_price', false, 'sum');
				var rukuNums = $("#grid").getCol('rukuNum', false, 'sum');
				var rukuMoneys = $("#grid").getCol('rukuMoney', false, 'sum');
				$("#grid").footerData('set', { "goods_sn": '合计：', num: nums, base_shuliang: base_shuliangs, total_price: total_prices, rukuNum: rukuNums, rukuMoney: rukuMoneys });
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			},
			//开启分组
			grouping: true,
			groupingView: {
				groupField: ['good_id'], //需要分组的列
				groupSummary: [true],         //是否显示汇总  如果为true需要在colModel中进行配置 如： summaryType:'sum', summaryTpl:'<b>小计: {0}</b>''
				groupColumnShow: [false],      //是否显示分组列
				groupCollapse: false,         //该属性表示在加载数据的时候是否只显示分组信息，false表示既显示分组信息也显示每个分组里面的详细信息，true则只显示分组信息
			},

		});

		var headH = 0;  //顶部搜索是否展开（1：展开，0：未展开）
		$("#conditions-trigger").click(function () {
			if (headH == 0) {
				headH = 1;
				$("#filterItems").css({ "height": "auto" });
				$(this).html("&nbsp;收起条件<b class='act'></b>");
				// 设置表格高度
				$("#grid").setGridHeight($(window).height() - 230 - $("#filter-menu").height() + "px");
			} else {
				headH = 0;
				$("#filterItems").css({ "height": "44px" });
				// $("#filterItems").animate({height:'44px'});
				$(this).html("&nbsp;更多条件<b></b>");
				// 设置表格高度
				$("#grid").setGridHeight($(window).height() - 230 - $("#filter-menu").height() + "px");
			}
		});
		// 点击下拉框其他位置隐藏
		$(document).click(function () {
			$("#filterSelectBox").hide();
		});
		// 阻止冒泡
		$("#filter .ui-tree-wrap,#goodsfilter .ui-tree-wrap").click(function (event) {
			event.stopPropagation();
		});



	});

	function cLink(cellvalue, options, rowObject) {
		// console.log(rowObject.status);
		if (rowObject.status == 0) {
			return '<span class="set-status open" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
		} else {
			return '<span class="set-status close" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
		}

	}

	function actions(cellvalue, options, rowObject) {
		return '<div class="operating"><span class="ui-icon ui-icon-pencil" onclick="lopen(\'edit.html?id=' + rowObject.id + '\',\'编辑\',\'400px\',\'300px\')">修改</span> <span class="ui-icon ui-icon-trash" onclick="del(' + rowObject.id + ')">删除</span></div>';
	}

	function switchs(obj, id) {
		if ($(obj).hasClass("open")) {
			$(obj).removeClass("open");
			$(obj).addClass("close");
			status = 1;
		} else {
			$(obj).removeClass("close");
			$(obj).addClass("open");
			status = 0;
		}

		$.ajax({
			type: 'POST',
			url: "save.html",
			data: { id: id, status: status },
			dataType: "json",
			async: false,
			error: function (request) {
				layer.msg("发送请求失败！");
			},
			success: function (data) {
				if (data.status == 1) {
					layer.msg(data.msg);
				} else {
					layer.msg(data.msg);
				}

			}
		});
	}

	// 顶部搜索下拉选择窗口(供应商类别)
	function chooseFilter() {
		var top = $("#filter .ui-tree-wrap").offset().top;
		var left = $("#filter .ui-tree-wrap").offset().left;
		var width = $("#filter .ui-tree-wrap").width();
		$("#filterSelectBox").toggle();
		$("#filterSelectBox").css({ "top": (top + 30) + "px", "left": (left) + "px", "minWidth": width + "px" });
	}
	// 顶部搜索下拉选择窗口(供应商类别)
	function chooseGoodsfilter() {
		var top = $("#goodsfilter .ui-tree-wrap").offset().top;
		var left = $("#goodsfilter .ui-tree-wrap").offset().left;
		var width = $("#goodsfilter .ui-tree-wrap").width();
		$("#filterSelectBox").toggle();
		$("#filterSelectBox").css({ "top": (top + 30) + "px", "left": (left) + "px", "minWidth": width + "px" });
	}

</script>

{include file="admin@public/footer"/}